<template>
  <div class="con">
    <div class="top borderStyle">
      <div class="blueTitleStyle">告警信息</div>
      <div class="contenr">
        <div class="text">
          <span class="icon">
            <span class="iconfont iconshishixiaoxitixing"></span>
          </span>
          <!-- <span>{{this.$route.query.GJNR}}</span> -->
          <span>{{gjzs.BDZMC}}&nbsp;&nbsp;{{gjzs.GJNR}}</span>
        </div>
        <div class="time">
          <span class="icon colors">{{this.$route.query.GJSJ}}</span>
        </div>
      </div>
    </div>
    <div class="in mediumtablestyle borderStyle">
      <div class="blueTitleStyle">联动控制信息</div>
      <div class="contenr">
        <!-- <div class="table-title">
          <div class="row1 Flex">联动设备</div>
          <div class="row2 Flex">当前状态</div>
          <div class="row3 Flex">控制操作</div>
        </div>
        <div class="table-con" v-if="getLeftTopLeftdata &&getLeftTopLeftdata.length>0">
          <div class="table-con2" v-for="(item, index) in getLeftTopLeftdata" :key="index">
            <div class="row1 Flex" :title="item.deviceName">{{item.deviceName}}</div>
            <div class="row2 Flex">{{item.value=='1'?'开启':'关闭'}} {{item.value}}</div>
            <div
              class="row3 Flex"
              @click="Clickstate(item)"
              :class="{zc:item.status,yc:!item.status}"
            >{{item.value=='1'?'关':'开'}}</div>
          </div>
        </div>
        <div v-else class="table-con3">暂无数据</div>-->
        <!-- 4.表格 -->
        <div class="main-right-table">
          <el-table
            :data="getLeftTopLeftdata"
            style="width: 100%"
            height="100%"
            :row-class-name="tableRowClassName"
            border
          >
            <el-table-column
              prop="deviceName"
              label="联动设备"
              :show-overflow-tooltip="true"
              width="160"
            ></el-table-column>
            <el-table-column prop="value" label="当前状态">
              <template slot-scope="scope">
                <div>{{scope.row.value=='1'?'开':'关'}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="控制操作">
              <template slot-scope="scope">
                <el-button
                  @click="Clickstate(scope.row)"
                  type="text"
                >{{scope.row.value=='1'?'关':'开'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="bottom borderStyle">
      <div class="blueTitleStyle">环境信息</div>
      <div class="contenr-special">
        <div class="item">
          <div class="item-left">温度</div>
          <div class="item-right" v-if="hjdata['040203'].value!=='-'">
            <span>{{hjdata['040203'].value}}</span>
            <span>{{hjdata['040203'].unit}}</span>
          </div>
          <div class="item-right" v-else>
            <span>{{hjdata['040102'].value}}</span>
            <span>{{hjdata['040102'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">湿度</div>
          <div class="item-right" v-if="hjdata['040204'].value!=='-'">
            <span>{{hjdata['040204'].value}}</span>
            <span>{{hjdata['040204'].unit}}</span>
          </div>
          <div class="item-right" v-else>
            <span>{{hjdata['040103'].value}}</span>
            <span>{{hjdata['040103'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">气压</div>
          <div class="item-right">
            <span>{{hjdata['040207'].value}}</span>
            <span>{{hjdata['040207'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">雨量</div>
          <div class="item-right">
            <span>{{hjdata['040206'].value}}</span>
            <span>{{hjdata['040206'].unit}}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-left">风速</div>
          <div class="item-right">
            <span>{{hjdata['040201'].value}}</span>
            <span>{{hjdata['040201'].unit}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import filter from "@/utils/filter";
import { GetSocketModule } from "@/store/modules/GetSocketData";

@Component
export default class extends Vue {
  @Prop() LeftTopLeftdata!: any;
  private LianDongList = [
    // {
    //   deviceName: "10kV开关室风机",
    //   dqzt: "开启",
    //   status: "1",
    // },
    // {
    //   deviceName: "10kV开关室风机",
    //   dqzt: "关闭",
    //   status: "0",
    // },
    // {
    //   deviceName: "10kV开关室风机",
    //   dqzt: "开启",
    //   status: "1",
    // },
  ];

  public get getLeftTopLeftdata() {
    let pointerList = this.LeftTopLeftdata.operationPointerList || [];
    let data = pointerList.map((item) => {
      let devicelist =
        GetSocketModule.AllAuxiliaryByDeviceId[item.deviceId] || [];
      devicelist.map((i) => {
        if (i.remoteType == "2") {
          // 拿引用类型的数据，改变的时候可以改掉原来的那条数据
          item.point = i;
          item.value = i.value;
          item.ztid = i.deviceId;
        }
      });
      return item;
    });

    return data;
  }

  get hjdata() {
    let getterStationHj = GetSocketModule.getterStationHj || {};
    let hjdata = getterStationHj[this.stationId] || {};
    // console.log(12, hjdata);
    let obj = {
      "040201": {
        value: "-",
        unit: "m/s",
      }, //风速监测
      "040202": {
        value: "-",
        unit: "m/s",
      }, //风向
      "040203": {
        value: "-",
        unit: "℃",
      }, //温度监测
      "040102": {
        value: "-",
        unit: "℃",
      }, //温度监测
      "040204": {
        value: "-",
        unit: "%",
      }, //湿度监测
      "040103": {
        value: "-",
        unit: "%",
      }, //湿度监测
      "040206": {
        value: "-",
        unit: "mm",
      }, //  雨量
      "040207": {
        value: "-",
        unit: "kPa",
      }, //  气压
      stationName: "", //变电站名称
      stationId: "", //变电站
    };
    for (let key in hjdata) {
      let item = hjdata[key] || {};
      obj[key] = {
        value: item.value || "-",
        unit: item.unit || "",
      };
    }
    // "040201": //风速监测
    // "040202": //风向
    // "040203": //温度监测
    // "040204"://湿度监测
    // "040206": //  雨量
    //风力,根据风速判断 feng(040201.value)
    let stationName = hjdata["stationName"];
    let stationId = hjdata["stationId"];
    obj.stationName = stationName;
    obj.stationId = stationId;

    return obj;
  }
  gjzs: any = [];
  stationId = "";
  mounted() {
    this.setStationId();
    console.log(this.$route.query);
    this.gjzs = this.$route.query;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  setStationId() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    this.stationId = stationId;
  }
  addInframe() {
    // let el-picker-panel el-date-picker el-popper
    window.setTimeout(() => {
      let pickerArr = document.querySelectorAll(".el-message-box__wrapper");
      pickerArr.forEach((item) => {
        let width = item.clientWidth;
        let height = item.clientHeight;
        let iframe: any = item.querySelector("iframe");
        if (!iframe) {
          iframe = document.createElement("iframe");
          item.appendChild(iframe);
        }
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
        iframe.style.position = "absolute";
        iframe.style.top = "0px";
        iframe.style.left = "0px";
        iframe.style.zIndex = 1;
        iframe.style.zIndex = 1;
        iframe.style.pointerEvents = "none";
      });
    }, 100);
  }
  Clickstate(item) {
    this.addInframe();
    var switchs = item.value == "1" ? "关" : "开";
    this.$confirm("是否" + switchs, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        var params = {
          command: item.command,
          pointerId: item.pointerId,
        };
        (this as any).$services
          .sendPointerCommand({
            data: params,
            method: "post",
            postparams: true,
          })
          .then((res: any) => {
            if (item.point.value == "1") {
              item.point.value = "0";
            } else {
              item.point.value = "1";
            }
            if (res.data) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
  }
}
</script>

<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 22%;
    .text {
      width: 100%;
      height: 60%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .time {
      width: 100%;
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 0.16rem;
    }
    .icon {
      margin-right: 0.1rem;
      .iconfont {
        color: yellow;
      }
    }
    .it {
      display: inline-block;
      width: 0.5rem;
    }
  }
  .in {
    width: 100%;
    height: calc(39% - 0.1rem);
    margin: 0.1rem 0;
    .table-title {
      width: 100%;
      height: 0.28rem;
      border-bottom: 2px solid #1489c9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.16rem;
      background-color: rgb(20, 50, 116);
    }
    .Flex {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .row1 {
      height: 100%;
      width: 50%;
    }
    .row2 {
      height: 100%;
      width: 25%;
      border-left: 1px solid #1c82b9;
      border-right: 1px solid #1489c9;
      // border-right: 1px solid rbga(20,137,137,0.6);
    }
    .row3 {
      height: 100%;
      width: 25%;
    }
    .table-con {
      width: 100%;
      height: calc(100% - 0.28rem);

      .table-con2 {
        width: 100%;
        height: 0.24rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.16rem;
      }
      .yc {
        // color: rgb(79, 174, 54);
        color: #1ab2ff;
      }
      .zc {
        // color: rgb(216, 227, 63);
        color: #1ab2ff;
      }
    }
    .table-con3 {
      width: 100%;
      height: calc(100% - 0.28rem);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
  }
  .bottom {
    width: 100%;
    height: calc(39% - 0.1rem);
  }
  .contenr {
    width: 100%;
    height: calc(100% - 0.27rem);
    padding: 0.08rem;
    .main-right-table {
      height: 100%;
    }
  }
  .contenr-special {
    width: 100%;
    height: calc(100% - 0.27rem);
    padding: 0.08rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.1rem 0.16rem;
    .item {
      width: 47%;
      height: 30%;
      // background-color: rgb(79, 174, 54);
      display: flex;
      align-items: center;
      margin-bottom: 0.04rem;
      border: solid 1px rgb(30, 110, 190);
      &-left {
        width: 40%;
        text-align: center;
        border-right: solid 1px royalblue;
      }
      &-right {
        width: 60%;
        padding: 0 0.1rem;
      }
    }
  }
  .colors {
    color: #999;
  }
}
</style>

